<template>
  <div class="flex text-[14px] flex-wrap relative">
    <div class="flex items-center h-[60px] mr-[15px]">
      <div class="w-[70px]">
        <span v-if="route.query.type == 1 && route.query.parentIndex == 1">批改时间</span>
        <span v-else>出单时间：</span>
      </div>
      <div class="flex items-center">
        <el-date-picker
          placeholder="请选择"
          v-model="Info.start_time"
          type="date"
          value-format="YYYY-MM-DD"
          style="width: 95px"
        />
        -
        <el-date-picker
          placeholder="请选择"
          v-model="Info.end_time"
          value-format="YYYY-MM-DD"
          type="date"
          style="width: 95px"
        />
      </div>
    </div>
    <div class="flex items-center h-[60px] mr-[15px]">
      <div class="w-[70px]">供货商：</div>
      <div>
        <el-select
          v-model="Info.brand_id"
          placeholder="请选择供应商"
          style="width: 198px"
          clearable
        >
          <el-option
            v-for="item in queryDataList"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
    <div class="flex items-center h-[60px] mr-[15px]">
      <div class="min-w-[70px]">产品名称：</div>
      <div>
        <el-select
          v-model="Info.bx_id"
          placeholder="请选择投保产品"
          style="width: 198px"
          clearable
        >
          <el-option
            v-for="item in prodecu_list"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
    <!-- <div class="flex items-center h-[60px] mr-[15px]" v-if="route.query.type == 1">
      <div class="min-w-[70px]">订单状态：</div>
      <div>
        <el-select v-model="Info.type" placeholder="请选择订单状态" style="width: 198px">
          <el-option v-for="item in orderStateList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div> -->
    <div
      class="flex items-center h-[60px] mr-[15px]"
      v-if="route.query.type != 1 && route.query.type != 3"
    >
      <div class="w-[70px]">订单号：</div>
      <div>
        <el-input
          v-model="Info.order_no"
          placeholder="请输入订单号"
          style="width: 198px"
        />
      </div>
    </div>
    <div class="flex items-center h-[60px] mr-[15px]">
      <div class="w-[70px]">投保人：</div>
      <div>
        <el-input
          v-model="Info.name"
          placeholder="请输入投保人姓名"
          style="width: 198px"
        />
        <!-- :style="
            route.query.type == 1
              ? 'width: 12.3vw'
              : route.query.type == 3
              ? 'width: 12.3vw'
              : 'width: 7.8vw;'
          " -->
      </div>
    </div>
    <div
      class="flex items-center h-[60px] mr-[15px]"
      v-if="route.query.type == 1 || route.query.type == 3"
    >
      <div class="w-[70px]">保单号：</div>
      <div>
        <el-input placeholder="请输入保单号" v-model="Info.bd_no" style="width: 198px" />
      </div>
    </div>
    <div class="flex items-center h-[60px] mr-[15px]" v-if="route.query.type == 1">
      <div class="w-[70px]">人证件号：</div>
      <div>
        <el-input
          placeholder="请输入身份证号码"
          v-model="Info.card_no"
          style="width: 198px"
        />
      </div>
    </div>
    <div
      class="flex items-center h-[60px] mr-[15px]"
      v-if="route.query.type == 1 && route.query.parentIndex == 1"
    >
      <div class="w-[70px]">批改类型：</div>
      <div>
        <el-select
          v-model="Info.type"
          placeholder="请选择批改类型"
          style="width: 198px"
          clearable
        >
          <el-option
            v-for="item in pdDataList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <!-- absolute bottom-[15px] right-[45px] -->
    <div class="flex items-center mt-[20px] justify-end w-full">
      <div
        @click="clickSearch"
        class="w-[70px] h-[30px] border border-[#EF6800] rounded-[5px] text-[#EF6800] text-[14px] flex justify-center items-center cursor-pointer"
      >
        查询
      </div>
      <div
        @click="reset"
        class="w-[70px] ml-[10px] h-[30px] border border-[#EF6800] rounded-[5px] text-[#EF6800] text-[14px] flex justify-center items-center cursor-pointer"
      >
        重置
      </div>
      <div class="text-[#F00505] text-[12px] ml-[20px]" v-if="route.query.type == 0">
        注:起保时间已过期的订单不会显示可至订单修改功能中修改后重新提交。
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { keysOf } from "element-plus/es/utils/objects.mjs";
import { ref, shallowRef, defineProps, watchEffect, defineExpose } from "vue";
import { useRoute } from "vue-router";
const props = defineProps({
  getQueryDataList: {
    type: Array, //供货商数据
  },
  productList: {
    type: Array,
  },
});
interface InfoType {
  page: string;
  brand_id: string;
  bx_id: string;
  start_time: string;
  end_time: string;
  order_no: string;
  name: string;
  bd_no: string;
  type: string;
  card_no: string;
}
const Info = ref<InfoType>({
  page: "",
  brand_id: "",
  bx_id: "",
  start_time: "",
  end_time: "",
  order_no: "",
  name: "",
  bd_no: "",
  type: "",
  card_no: "",
});
const pdDataList = ref([
  {
    value: "1",
    label: "批增被保人",
    show: true,
  },
  {
    value: "2",
    label: "批改投保人",
    show: true,
  },
  {
    value: "3",
    label: "批改被保人",
    show: true,
  },
  {
    value: "4",
    label: "批减被保人",
    show: true,
  },
  {
    value: "5",
    label: "批改工程信息",
    show: true,
  },
  {
    value: "6",
    label: "批改地址信息",
    show: true,
  },
  {
    value: "7",
    label: "批改特约",
    show: true,
  },
]);
const prodecu_list = ref([] as any[]);
const queryDataList = ref([] as any[]); //供货商数据
const pickerStart = ref("");
const route = useRoute();
const pickerEnd = ref("");
const ghsSelect = ref("");
const orderStateList = ref([
  {
    value: "1",
    label: "待支付",
  },
  {
    value: "2",
    label: "已支付",
  },
]);
const emit = defineEmits(["clickSearch"]);
const clickSearch = () => {
  emit("clickSearch");
};
const reset = () => {
  let key: keyof InfoType;
  for (key in Info.value) {
    Info.value[key] = "";
  }
};
watchEffect(() => {
  // if (route) {
  //   let key: keyof InfoType;
  //   for (key in Info.value) {
  //     Info.value[key] = "";
  //   }
  // }
  if (props.getQueryDataList) {
    queryDataList.value = props.getQueryDataList;
  }
  if (props.productList) {
    prodecu_list.value = props.productList;
  }
});
defineExpose({
  Info,
});
</script>
<style scoped lang="scss">
:deep(.el-input__prefix) {
  display: none !important;
}
</style>
